<template>
  <view class="container pageBg">
    <!-- 添加药品表单 -->
    <view class="add-form">
      <view class="form-title">添加新药品</view>

      <!-- 药品图片上传 -->
      <view class="upload-area" @click="uploadImage">
        <image v-if="newMedicine.image" :src="newMedicine.image" class="medicine-image" />
        <view v-else class="upload-placeholder">
          <uni-icons type="plusempty" size="40" color="#ccc" />
          <text>点击上传药品图片</text>
        </view>
      </view>

      <!-- 药品信息 -->
      <view class="input-group">
        <text class="label">药品名称</text>
        <input v-model="newMedicine.name" placeholder="请输入药品名称" />
      </view>

      <view class="input-row">
        <view class="input-group">
          <text class="label">每次用量</text>
          <input v-model="newMedicine.dosage" type="number" placeholder="例：2" />
          <picker :range="unitList" @change="onUnitChange">
            <view class="unit-picker">{{ newMedicine.unit || '选择单位' }}</view>
          </picker>
        </view>
        <view class="input-group">
          <text class="label">每日次数</text>
          <input v-model="newMedicine.frequency" type="number" placeholder="例：3" />
        </view>
      </view>

      <!-- 用药时间 -->
      <view class="input-group">
        <text class="label">用药时间</text>
        <view class="time-tags">
          <view 
            v-for="(item, index) in timeOptions" 
            :key="index"
            :class="['time-tag', { active: newMedicine.times.includes(item) }]"
            @click="toggleTime(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>

      <button class="save-btn" @click="saveMedicine">保存药品</button>
    </view>

    <!-- 药品列表 -->
    <view class="medicine-list">
      <view 
        v-for="(item, index) in medicineList" 
        :key="item.id"
        class="medicine-item"
      >
        <image :src="item.image" class="item-image" />
        <view class="item-info">
          <text class="name">{{ item.name }}</text>
          <text class="dosage">用量：{{ item.dosage }}{{ item.unit }} × {{ item.frequency }}次/日</text>
          <text class="time">时间：{{ item.times.join(', ') }}</text>
        </view>
        <uni-icons 
          type="trash" 
          size="24" 
          color="#ff4444" 
          class="delete-btn"
          @click="deleteMedicine(index)"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const unitList = ['粒', '片', 'ml', 'mg', '支', '滴']
const timeOptions = ['早晨', '中午', '晚上', '睡前']

// 新药品数据
const newMedicine = ref({
  name: '',
  image: '',
  dosage: '',
  unit: '',
  frequency: '',
  times: []
})

// 药品列表
const medicineList = ref([])

// 初始化加载数据
onMounted(() => {
	medicineList.value = generateMockData()
})

// 生成假数据
const generateMockData = () => {
  return [
    {
      id: 1,
      name: '阿司匹林',
      image: '/static/images/aspl.jpg',
      dosage: 1,
      unit: '片',
      frequency: 3,
      times: ['早晨', '中午', '晚上']
    },
    {
      id: 2,
      name: '维生素C',
      image: '/static/images/wssc.jpg',
      dosage: 2,
      unit: '粒',
      frequency: 1,
      times: ['早晨']
    },
    {
      id: 3,
      name: '降压药',
      image: '/static/images/jyy.jpg',
      dosage: 1,
      unit: '片',
      frequency: 2,
      times: ['早晨', '晚上']
    }
  ]
}

// 上传图片
const uploadImage = async () => {
  try {
    const res = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album']
    })
    newMedicine.value.image = res.tempFilePaths[0]
  } catch (err) {
    console.log('取消选择')
  }
}

// 切换单位
const onUnitChange = (e) => {
  newMedicine.value.unit = unitList[e.detail.value]
}

// 选择用药时间
const toggleTime = (time) => {
  const index = newMedicine.value.times.indexOf(time)
  if (index > -1) {
    newMedicine.value.times.splice(index, 1)
  } else {
    newMedicine.value.times.push(time)
  }
}

// 保存药品
const saveMedicine = () => {
  if (!newMedicine.value.name) {
    uni.showToast({ title: '请填写药品名称', icon: 'none' })
    return
  }
  if (!newMedicine.value.dosage || !newMedicine.value.unit) {
    uni.showToast({ title: '请填写用药剂量', icon: 'none' })
    return
  }
  if (!newMedicine.value.times.length) {
    uni.showToast({ title: '请选择用药时间', icon: 'none' })
    return
  }

  const medicine = {
    id: Date.now(),
    ...newMedicine.value
  }

  medicineList.value.unshift(medicine)
  uni.setStorageSync('medicineList', JSON.stringify(medicineList.value))
  resetForm()
  uni.showToast({ title: '添加成功' })
}

// 删除药品
const deleteMedicine = (index) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个药品吗？',
    success: (res) => {
      if (res.confirm) {
        medicineList.value.splice(index, 1)
        uni.setStorageSync('medicineList', JSON.stringify(medicineList.value))
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  newMedicine.value = {
    name: '',
    image: '',
    dosage: '',
    unit: '',
    frequency: '',
    times: []
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.add-form {
  background: white;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.upload-area {
  height: 300rpx;
  border: 2rpx dashed #ccc;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-placeholder {
  text-align: center;
  color: #999;
}

.medicine-image {
  width: 100%;
  height: 300rpx;
  border-radius: 16rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 15rpx;
}

input {
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.input-row {
  display: flex;
  gap: 30rpx;
}

.input-row > view {
  flex: 1;
}

.unit-picker {
  padding: 15rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.time-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.time-tag {
  padding: 10rpx 30rpx;
  border: 1rpx solid #007AFF;
  border-radius: 40rpx;
  color: #007AFF;
}

.time-tag.active {
  background: #007AFF;
  color: white;
}

.save-btn {
  background: #007AFF;
  color: white;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  margin-top: 40rpx;
}

.medicine-list {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
}

.medicine-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 30rpx;
}

.item-info {
  flex: 1;
}

.name {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.dosage {
  display: block;
  font-size: 26rpx;
  color: #666;
}

.time {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}

.delete-btn {
  padding: 20rpx;
}
</style>